<template>
  <div ref="containerRef" class="container"></div>
</template>

<script lang="ts" setup>
import * as THREE from 'three';
import {onMounted, ref} from 'vue';

const containerRef = ref<HTMLDivElement>();
// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0xeeeeee);
renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild(renderer.domElement);

// 创建立方体（MeshLambertMaterial）
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加聚光灯
const spotLight = new THREE.SpotLight(0xffffff, 400);
spotLight.position.set(10, 10, 10);
spotLight.target = cube; // 指向立方体
spotLight.angle = Math.PI / 3;
spotLight.distance = 150;
scene.add(spotLight);
scene.add(spotLight.target); // 必须加入场景

// 设置相机位置
camera.position.z = 20;
camera.position.y = 20;
camera.position.x = 20;
camera.lookAt(scene.position);

const axes = new THREE.AxesHelper(20);

scene.add(axes);

// 渲染循环
/* function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate(); */

onMounted(() => {
  // document.body.appendChild(renderer.domElement);
  containerRef.value?.appendChild(renderer.domElement);
  renderer.render(scene, camera);
});
</script>

<style>
</style>
